<template>
	<view class="index_main">
		<movable-area class="movable-area">
			<!-- //根据x,y设置初次显示的位置 -->
			<movable-view x="650rpx" y="750rpx" animation="false" class="movable-view" direction='all'>
				<!-- <text class="xf-text" @click="tiaozhuan">企业版</text> -->
				<image src="../../static/icon/qiyeban.png" @click="tiaozhuan" mode=""></image>
			</movable-view>
		</movable-area>
		<view class="add_main" @click="guanzhu" v-if="isOfficialShow==true">
			<image src="../../static/icon/guanzhu.png" mode=""></image>
			<view class="close" @click.stop="closeOff">
				<image src="../../static/icon/close.png" mode=""></image>
			</view>
		</view>
		<!-- <head1 class="head_main"></head1> -->
		<scroll-view class="content-cont">
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper swiper_main" :indicator-dots="indicatorDots" :autoplay="autoplay"
							:interval="interval" :duration="duration" circular>
							<swiper-item v-for="(item,index) in banner" :key="index" @click="shiming">
								<view class="swiper-item uni-bg-red">
									<image :src="webImgUrl+item" mode="" />
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<!-- 精选推荐 -->
			<view class="selectedRecommend">
				<view class="CertificateDynamics">
					<view class="c_main c_main1">
						<view class="CertificateDynamics_left">
							<image src="../../static/icon/wjx.png" mode=""></image>
							<text class="tit">精选推荐</text>
						</view>
					</view>
				</view>
				<view class="selected_main">
					<view class="selected_main_list">
						<view class="selected_main_list1" @click="myCert">
							<image src="../../static/icon/icon1(3).png" mode=""></image>
						</view>
						<text class="jxtj_tit">我的证书</text>
						<view class="selected_main_des">
							住建厅官网数据 实时同步
						</view>
					</view>
					<view class="selected_main_list selected_main_list22">
						<view class="selected_main_list2" @click="warnging">
							<image src="../../static/icon/icon1(2).png" mode=""></image>
						</view>
						<text class="jxtj_tit">分析预警</text>
						<view class="selected_main_des">
							证书问题早知道
						</view>
					</view>
					<view class="selected_main_list">
						<view class="selected_main_list3" @click="tenderFile">
							<image src="../../static/icon/icon1(1).png" mode=""></image>
						</view>
						<text class="jxtj_tit">投标档案</text>
						<view class="selected_main_des">
							实时监控证书 是否被盗用
						</view>
					</view>
				</view>
			</view>
			<!-- 证书动态 -->
			<view class="final_line"></view>
			<view class="CertificateDynamics" v-if="certsList.length!=0">
				<view class="c_main">
					<view class="CertificateDynamics_left">
						<image src="../../static/icon/zsdt.png" mode=""></image>
						<text class="tit">证书动态</text>
						<view class="textscroll">
							<scroll :list="list"></scroll>
						</view>
					</view>
					<view class="CertificateDynamics_right" @click="more(certsList)">
						更多
					</view>
				</view>
				<step :ctype="certsList"></step>
			</view>
			<view class="CertificateDynamics" v-if="certsList.length==0">
				<view class="c_main">
					<view class="CertificateDynamics_left">
						<image src="../../static/icon/zsdt.png" mode=""></image>
						<text class="tit">证书动态</text>
						<view class="textscroll">
							<scroll :list="list"></scroll>
						</view>
					</view>
				</view>
			</view>
			<view class="final_line"></view>
			<!-- 建筑咨询 -->

			<view class="architecturalConsulting">
				<view class="CertificateDynamics">
					<view class="c_main">
						<view class="CertificateDynamics_left">
							<image src="../../static/icon/jzzx.png" mode=""></image>
							<text class="tit">建筑咨询</text>
						</view>
						<view class="CertificateDynamics_right" @click="zdmbTitle">
							更多
						</view>
					</view>
				</view>
				<!-- 建筑咨询下面部分 -->
				<view class="actileJz">
					<!-- 0000000 -->
					<view class="actile_main" @click="actileMainDetail(item.messageId)" v-for="(item,index) in newList"
						:key="index">
						<view class="actile_main_left">
							<view class="actile_main_title">
								{{item.title}}
							</view>
							<view class="actile_main_bot">
								<text style="margin-top: 5rpx;">{{item.createTime}}</text>
								<!-- <image src="../../static/icon/yanjing.png" mode=""></image>
								<text>{{item.rows}}</text> -->
							</view>
						</view>
						<view class="actile_main_right" v-if="item.banner!=''">
							<image :src="webImgUrl+item.banner" mode=""></image>
						</view>
					</view>
					<!-- 0000000 -->
					<view v-if="newList.length==0"
						style="height: 200rpx;line-height: 200rpx;text-align: center;color: #999999;">{{meishuju}}
					</view>
				</view>
			</view>
			<!-- <view class="moren" v-if="moren==false">
			</view> -->
		</scroll-view>

	</view>
</template>

<script>
	import step from "../../common/step/step.vue"
	import head1 from "../../common/head/head.vue"
	import scroll from '../../components/screenTextScroll.vue'
	export default {
		components: {
			step,
			head1,
			scroll

		},
		data() {
			return {
				meishuju: '',
				showErweima: '',
				isOfficialShow: '',
				moren: false, //默认1秒后加载
				webImgUrl: '',
				certsList: [],
				zdmbClick: false,
				arcConTxt: '',
				list: [],
				// isRealName:'',   //是否实名
				zdmb_title: "展开",
				zdmb_isShow: true,
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 1000,
				value: ['0'],
				content: '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。',
				show1: true, //第1步
				show2: false, //第2步
				lineShow: false,
				show3: false, //第3步
				banner: [],
				newLabel: [], //新闻标签
				newList: [], //新闻列表
				card: '',
				userId: '',
				sfzh: '',
				labelList: {
					currentPage: '1',
					pageSize: '15',
					column: "f72655cb-4cfd-11ec-9573-5254003b9aa7"
				}
				
			}
		},

		computed: {
			isRealName() {
				return this.$store.state.isRealName
			},
			userid() {
				this.userId = this.$store.state.userId
			},
			gzStatus() {
				return this.$store.state.guanzhuGZH
			}
		},
		watch: {
			gzStatus: {
				handler(n, m) {
					this.isOfficialShow = n
					uni.setStorageSync('isOfficialShow', n)
				},
				deep: true,
				immediate: true
			}
		},
		created() {
			let that = this
			// 关注公众号

			// uni.showLoading({
			// 	title: '数据加载中...'
			// })
			that.loadingInitData()
			// setTimeout(function() {
			// 	that.moren = true
			// 	uni.hideLoading()
			// }, 1000)

		},
		onLoad() {},
		onShow() {},
		methods: {
			tiaozhuan: function() {
				wx.navigateToMiniProgram({
					appId: 'wxe96cd571c4c0c9cd',
					path: 'pages/logon/index',
				 envVersion: 'release',
					success(res) {
						
					}
				})
			},
			// 证书动态滚动新闻
			getScrollList() {
				let _this = this;
				_this.$myResquest.getCertLunbo().then(res => {
					if (res.data.code == 200) {
						_this.list = res.data.data
					}
				})
			},
			// 关闭关注提示框
			closeOff() {
				this.$store.commit('newGZH', 'false')
			},
			getIsGZH() {
				let that = this
				let _unionId = uni.getStorageSync('unionId')
				uni.request({
					url: 'https://www.chuanjianbao.com/ent/open/check/subscribe',
					data: {
						unionId: _unionId
					},
					success(res) {
						// that.$store.commit('newGZH', res.data.code)
						that.showErweima = res.data.code
					}
				})

			},
			guanzhu() {
				uni.navigateTo({
					url: '../../common/guanzhu/guanzhu'
				})
			},
			loadingInitData() {

				// 获取图片前缀
				this.webImgUrl = this.$webUrl
				this.getScrollList() // 证书动态滚动新闻
				this.getBanner() //轮播图
				this.getCerts() //证书动态
				this.getNewLabel() //新闻标签
				this.getNewList(this.labelList) //新闻列表
				// this.getIsGZH()   //判断是否关注了公众号
			},
			// 强制刷新、重新加载页面
			test() {
				this.$forceUpdate()
			},

			// 轮播图
			getBanner() {
				this.getIsGZH()

				this.$myResquest.banner().then(res => {
					if (res.data.code == 200) {
						this.banner = res.data.data
					}
				})
			},
			// 轮播图实名
			shiming(){
				let userIsReal = uni.getStorageSync('userIsReal')
				if(userIsReal == '未实名'){
					uni.navigateTo({
						url: '../../common/realName/noRealName'
					})
				}
			},
			// 证书动态
			getCerts() {
				let Sfzh = uni.getStorageSync('userSfzh')
				let userid = uni.getStorageSync('userId')
				let userIsReal = uni.getStorageSync('userIsReal')
				// this.userInfo.userId=
				// 判断是否实名
				if (userIsReal == '已实名') {
					this.$myResquest.getCert({
						'userId': userid,
						'sfzh': Sfzh
					}).then(res => {
						if (res.data.code == 200) {
							let jsonData = JSON.parse(res.data.data)
							this.certsList = jsonData
						}
					})
				}

			},
			// 新闻标签、
			getNewLabel() {
				this.$myResquest.getNewsLabel().then(res => {
					if (res.data.code == 200) {
						this.newLabel = res.data.data
						this.newLabel.splice(0, 0, '全部')

					}
				})
			},
			// 新闻列表
			getNewList(newLabel) {
				this.$myResquest.getNewsList(newLabel).then(res => {
					if (res.data.code == 200) {
						this.newList = res.data.data
					}
				})
			},
			
			//标签切换
			NewList(newLabel, index) {
				let that = this
				that.meishuju = ''
				that.newList = []
				uni.showLoading({
					title: '数据加载中'
				})
				this.arcConTxt = index
				setTimeout(function() {
					if (newLabel == '全部') {
						that.labelList.label = ''
						that.$myResquest.getNewsList(that.labelList).then(res => {
							if (res.data.code == 200) {
								that.newList = res.data.data
								if (that.newList.length == 0) {
									that.meishuju = '暂无数据信息'
								}
								uni.hideLoading()
							}
							uni.hideLoading()
						})
					} else {
						that.labelList.label = newLabel
						that.$myResquest.getNewsList(that.labelList).then(res => {
							if (res.data.code == 200) {
								that.newList = res.data.data
								if (that.newList.length == 0) {
									that.meishuju = '暂无数据信息'
								}
								uni.hideLoading()
							}
							uni.hideLoading()
						})
					}
				}, 1000)

			},

			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			btn(m) {
				if (m == "展开") {
					this.zdmb_isShow = !this.zdmb_isShow;
					this.zdmb_title = "折叠"
				} else {
					this.zdmb_title = "展开",
						this.zdmb_isShow = !this.zdmb_isShow;
				}
			},
			// 我的证书
			myCert() {
				if (this.isRealName == "未实名") {
					uni.navigateTo({
						url: '../../common/realName/noRealName'
					})
				}
				if (this.isRealName == '已实名') {
					uni.navigateTo({
						url: '../../common/realName/realName'
					})
				}

			},
			// 判断是否认证
			warnging() {
				if (this.isRealName == "未实名") {
					uni.navigateTo({
						url: '../../common/noRealWaring/noRealWaring'
					})
				}
				if (this.isRealName == "已实名") {
					uni.navigateTo({
						url: '../../common/noRealWaring/waring'
					})
				}

			},
			tenderFile() {
				if (this.isRealName == "未实名") {
					uni.navigateTo({
						url: '../../common/tenderFile/realTenderFile'
					})
				}
				if (this.isRealName == "已实名") {
					uni.navigateTo({
						url: '../../common/tenderFile/tenderFile'
					})
				}

			},
			// 证书动态更多
			more(list) {
				uni.navigateTo({
					url: '../../pageA/certDynamics/certDynamics?data=' + JSON.stringify(list)
				})
			},

			// 详情
			actileMainDetail(index) {
				uni.navigateTo({
					url: "../../pageA/realTime/realTimeDetail?id=" + index
				})
			},
			zdmbTitle() {
				uni.navigateTo({
					url: "../../pageA/realTime/realTime"
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.textscroll {
		width: 290rpx;
		margin-left: 30rpx;
	}

	.index_main {
		background: #f7f7f7 !important;

		.official {
			position: fixed;
			bottom: 100rpx;
		}
		.movable-area{
		 pointer-events:none;
		 /* 这个属性设置为none,让所有事件穿透过去 */
		 z-index: 100;
		 width: 100%;
		 height: 100%;
		 position: fixed;
		 top: 0;
		 left: 0;
		 right: 0;
		 bottom: 0;
		}
		.movable-view{ 
		 pointer-events:auto;
		 /* 重设为auto,覆盖父属性设置 */
		 height: 100rpx;
		 width: 100rpx;
		 /* background: red; */
		 image{
			 width: 100rpx;
			 height: 100rpx;
		 }
		}
	}

	.content-cont::-webkit-scrollbar {
		width: 0 !important;
		height: 0;
		color: transparent;
	}

	.swiper_main {
		/deep/ .uni-swiper-dots {
			position: absolute;
			bottom: 4rpx !important;

		}

		/deep/ .uni-swiper-dot-active {


			background-color: #5cd1ce !important;

		}

		/deep/ .wx-swiper-dots {
			position: absolute;
			bottom: 4rpx !important;

		}

		/deep/ .wx-swiper-dot-active {


			background-color: #5cd1ce !important;

		}

	}

	// @import "~@/static/font/font-name.css";
	.swiper {
		width: 750rpx;
		height: 284rpx;



		.swiper-item {
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.selectedRecommend {
		width: 602rpx;
		margin: 50rpx auto 0;
		box-sizing: content-box;
		
		.tit {
			text {
				width: 126rpx;
				height: 30rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #49b3af;
				font-weight: bold;
			}
		}

		.selected_main {
			width: 602rpx;
			height: 264rpx;
			background: #ffffff;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.selected_main_list {
				box-sizing: border-box;
				text-align: center;
				width: 190rpx;
				.selected_main_list1,
				.selected_main_list2,
				.selected_main_list3 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					image {
						width: 90rpx;
						height: 90rpx;
						margin-bottom: 14rpx;
					}

					text {
						color: #ffffff;
						font-size: 26rpx;
						text-align: center;
						font-weight: 500;
						font-family: PingFang SC, PingFang SC-Bold;
					}
				}

				.jxtj_tit {
					font-size: 26rpx;
					font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
					font-weight: bold;
					color: #332c2b;
				}

				.selected_main_des {
				    width: 126rpx;
				    font-size: 20rpx;
				    font-family: PingFang SC, PingFang SC-Medium;
				    font-weight: 500;
				    text-align: center;
				    color: #1397c8;
				    line-height: 28rpx;
				    margin: 0 auto;
				    height: 80rpx;
				    padding: 10rpx 0 0;
				}

			}

			.selected_main_list22 {
				border-left: 1rpx dashed #c9caca;
				border-right: 1rpx dashed #c9caca;
			}
		}

	}

	.CertificateDynamics {
		position: relative;
		box-sizing: border-box;

		.c_main {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 602rpx;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 25rpx 0;

			.CertificateDynamics_left {
				display: flex;
				align-items: center;

				image {
					width: 35rpx;
					height: 35rpx;
					margin-right: 10rpx;
				}

				.tit {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: bold;
					text-align: left;
					height: 44rpx;
					line-height: 44rpx;
					color: #49b3af;
				}

				.textscroll {
					// width: 100rpx;
					// height: 300rpx;
					margin-top: 3rpx;
				}

				.des {
					font-size: 32rpx;
					font-family: FZXiaoBiaoSong-B05S, FZXiaoBiaoSong-B05S-Regular;
					font-weight: 400;
					text-align: left;
					color: #4bb1af;
					margin-left: 14rpx;
				}

				.desDetail {
					font-size: 30rpx;
					font-family: FZXiaoBiaoSong-B05S, FZXiaoBiaoSong-B05S-Regular;
					font-weight: 400;
					color: #4bb1af;
				}
			}

			.CertificateDynamics_right {
				font-size: 27rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: center;
				color: #b6b6b7;
			}
		}

		.c_main1 {
			padding: 0rpx 0 10rpx;
		}

		.Certificate_tit {
			position: absolute;
		}

	}

	.architecturalConsulting {
		position: relative;
		padding: 0 10rpx 30rpx;
		box-sizing: border-box;
		background: #ffffff;

		.architecturalConsulting_main {
			position: relative;


			.architemore {
				position: absolute;
				top: 10rpx;
			}

			.architecturalConsultingDiv {
				display: flex;
				flex-wrap: wrap;
				padding: 0 20rpx 10rpx;
				box-sizing: border-box;
				width: 100%;
				max-height: 126px;
				overflow: hidden;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				white-space: nowrap;
				height: 126rpx;

				.architecturalConsultingTxt {
					padding: 0 12rpx;
					box-sizing: content-box;
					margin: 10rpx;
					display: flex;
					height: 38rpx;
					border: 2rpx solid #5cd1ce;
					border-radius: 18rpx;
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #5cd1ce;
					line-height: 36rpx;
				}
			}
		}
	}

	.actileJz {
		background: #ffffff;
		margin-bottom: 31rpx;
		width: 602rpx;
		height: 100%;
		margin: 0 auto;
		background: #ffffff;
		.actile_main {
			    display: flex;
			    padding: 30rpx 0 0;
			    box-sizing: border-box;
			    margin: 0 auto;
			    border-bottom: 2rpx solid #e5e5e5;
			    justify-content: space-between;
			    width: 100%;
			&:first-child {
				border-top: 2rpx solid #e5e5e5;
			}
		
			.actile_main_left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 100%;
				margin-right: 10rpx;
		
				.actile_main_title {
					width: 100%;
					line-height: 47rpx;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: #333333;
					overflow: hidden;
		
					text-overflow: ellipsis;
		
					display: -webkit-box;
		
					-webkit-line-clamp: 2;
		
					/*! autoprefixer: off */
		
					-webkit-box-orient: vertical;
				}
		
				.actile_main_bot {
					font-size: 24rpx;
					font-weight: 500;
					color: #999999;
					margin-bottom: 12rpx;
					    margin-top: 15rpx;
		
					.time {
						width: 138rpx;
						height: 24rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						text-align: left;
					}
		
					.text {
						width: 28rpx;
						height: 36rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						text-align: left;
					}
		
					image {
						width: 32rpx;
						height: 18rpx;
						margin: 0 14rpx 0 24rpx;
					}
				}
			}
		
			.actile_main_right {
				image {
					width: 154rpx;
					height: 102rpx;
				}
			}
		}
	}

	.arcConTxtClass {
		color: #ffffff !important;
		background: #5cd1ce !important;
	}

	.moren {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		background-color: #ffffff;
	}

	.add_main {
		position: fixed;
		width: 700rpx;
		height: 140rpx;
		/* top: -40rpx; */
		left: 0;
		width: 700rpx;
		height: 140rpx;
		z-index: 999;
		bottom: 300rpx;
		left: 50%;
		transform: translateX(-50%);

		image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}

		.close {
			position: absolute;
			top: -30rpx;
			right: -20rpx;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			background: #ffffff;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
